<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统管理员</title>
		<script src="./vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style>
			ul li {
				border: 1px solid gold;
			}

			ul li span {
				border-right: 3px outset blueviolet;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>
				<input type="number" min="1" v-model="pageNo" placeholder="页号" />
				<input type="number" min="1" v-model="pageSize" placeholder="页大小" />
				<input type="text" v-model="aname" placeholder="登录名" />
				<input type="button" value="搜索" @click="doSearch()" />
			</p>
			<ul type="none">
				<li v-for="item in page.records">
					<span>{{item.aname}}</span><span>{{item.realname}}</span>
					<span>{{item.phone}}</span>
				</li>
			</ul>
			<p align="center">
				当前总页数是{{page.pages}},总条数:{{page.total}},当前页{{page.current}}
			</p>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					page: {},
					pageNo: 1,
				 pageSize: 10,
					aname: null
				},
				mounted() {
					this.load();
				},
				//监听这三个属性的变化
				watch:{
					pageSize(newV,oldV){
						console.log("页大小从"+oldV+"变成了"+newV);
						this.load();
						// let L=this.load;
						// window.setTimeout(function(){
						// 	L();
						// },1000);
						
					}
				},

				methods: {
					load() {
						axios.get("http://localhost:8886/admin/search", {
							params: {
								pageNo: this.pageNo,
								pageSize: this.pageSize,
								aname: this.aname,
							},
							headers:{
								
							}
						}).then(res => {
							console.log(res); //res.data是ajax返回的数据。。。
							this.page = res.data;

						}).catch(err => {
							alert("error:" + err);
						});
					},
					doSearch() {
						this.load();
					}
				}
			})
		</script>
	</body>
</html>
